<template>
  <div>
    <div>
      <el-form>
        <el-row>
          <el-col :span="10">
            <el-form-item label="收费名称">
              <el-input v-model="queryParams.name" clearable style="width: 350px" />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="10">-->
          <!--            <el-form-item label="收费时间">-->
          <!--              <el-date-picker-->
          <!--                v-model="dateRange"-->
          <!--                type="daterange"-->
          <!--                value-format="timestamp"-->
          <!--                range-separator="至"-->
          <!--                start-placeholder="开始日期"-->
          <!--                end-placeholder="结束日期"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="3">
            <el-button type="primary" @click="search()">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table
        v-loading="loading"
        :data="histories"
        border
        stripe
        fit
        highlight-current-row
        style="width: 100%"
      > align="center"
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column label="名称" prop="name" align="center" />
        <el-table-column label="收费方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.typeId | typeFilter }}
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.unitprice + "元 / " }}{{ scope.row.typeId | typeUnitFilter }}
          </template>
        </el-table-column>
        <el-table-column label="收费频率" align="center">
          <template slot-scope="scope">
            {{ scope.row.frequency | frequencyFilter }}
          </template>
        </el-table-column>
        <el-table-column label="收费日期" prop="startTime" width="170" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="截止日期" prop="endTime" width="170" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成率" align="center">
          <template slot-scope="scope">
            {{ scope.row.ratio }} %
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success">
              {{ scope.row.status | statusFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center">
              <el-button
                v-if="scope.row.status === 0"
                type="primary"
                @click="stopCharging(scope.row)"
              >结束</el-button>
              <el-button
                type="success"
                @click="payDetail(scope.row.id, scope.row.name)"
              >详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getHistory()"
      />
    </div>
  </div>
</template>

<script>
import { originalCosts, originalCostsHistory } from '/src/utils/baseInfo'
import { listHistory } from '../../api/pay/history'
import { dateFormat } from '/src/utils/dateUtils'

const typeArray = [
  {
    value: 1,
    label: '按户'
  },
  {
    value: 2,
    label: '房屋面积'
  },
  {
    value: 3,
    label: '人口'
  },
  {
    value: 4,
    label: '体积'
  },
  {
    value: 5,
    label: '度数'
  }
]

const typeUnitArray = [
  '户',
  '平方米',
  '人',
  '立方米',
  '度'
]

const frequencyArray = [
  {
    value: 0,
    label: '一次性收费'
  },
  {
    value: 1,
    label: '每年一次'
  },
  {
    value: 2,
    label: '每月一次'
  }
]

const statusArray = [
  '收费中',
  '未收费',
  '已完成'
]

export default {
  name: 'CostItemTable',
  filters: {
    typeFilter(val) {
      return typeArray[val].label
    },
    typeUnitFilter(val) {
      return typeUnitArray[val]
    },
    frequencyFilter(val) {
      return frequencyArray[val].label
    },
    statusFilter(val) {
      return statusArray[val]
    },
    dataFormatFilter(data) {
      if (data == null) return null
      return dateFormat('YYYY-mm-dd HH:MM', data)
    }
  },
  props: {
    type: undefined
  },
  data() {
    return {
      histories: [],
      name: '',
      dateRange: '',
      typeArray,
      frequencyArray,
      selectType: '',
      loading: false,
      // 查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        status: 0
      },
      total: 0
    }
  },
  watch: {
    type: {
      handler(newType) {
        this.selectType = newType
        this.getHistory()
      },
      immediate: true
    }
  },
  mounted() {
    this.getHistory()
  },
  methods: {
    getHistory() {
      this.queryParams.status = this.selectType === 'charging' ? 0 : 2
      this.loading = true
      listHistory(this.queryParams).then(res => {
        console.log(res)
        this.total = res.total
        this.histories = res.rows
        this.loading = false
      })
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        status: this.selectType
      }
    },
    search() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getHistory()
      this.reset()
    },
    stopCharging(costItem) {
      this.$confirm('您确定要截止【' + costItem.cost.name + '】收取吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 截止收费，将状态收费中改成已完成
        originalCostsHistory.map((value, index, arr) => {
          if (value.id === costItem.id) {
            arr[index].status = 2
            arr[index].cost.status = 2
          }
        })
        this.getCostItems(this.type)
        // 截止收费后调转到详情页面
        this.payDetail(costItem.id, costItem.cost.name)
        this.$message.success('收费已结束，调转到详情页面！')
      }).catch(() => {
        this.$message.info('已取消截止收费')
      })
    },
    // 跳转到缴费详情页面，传递 costItemId 查询这条缴费关联的人
    payDetail(hisId, name) {
      this.$router.push({
        path: 'paydetail',
        query: {
          hisId,
          name
        }
      })
    }
  }
}
</script>

<style>

</style>
